<template>
  <div v-if="count === 1" class="single-box">
    <div v-if="value && typeof value === 'string'" class="select-video-box" :style="{ width: size, height: size }">
      <ViewVideo :src="value" />
      <div class="del-box" @click="handleDel()">
        <n-icon class="icon-box" color="#ffffff"><DeleteOutlined /></n-icon>
      </div>
    </div>
    <div v-else class="plus-box" @click="showFileSelectModal = true" :style="{ width: size, height: size }">
      <n-icon class="icon-box" :size="24"><CaretRightOutlined /></n-icon>
    </div>
  </div>
  <div v-else class="multiple-box">
    <div
      v-for="(item, index) in value && value instanceof Array ? value : []"
      :key="index"
      class="select-video-box"
      :style="{ width: size, height: size }"
    >
      <ViewVideo :src="item" />
      <div class="del-box" @click="handleDel(index)">
        <n-icon class="icon-box" color="#ffffff"><DeleteOutlined /></n-icon>
      </div>
    </div>
    <div v-if="value.length < count" class="plus-box" @click="showFileSelectModal = true" :style="{ width: size, height: size }">
      <n-icon class="icon-box" :size="24"><CaretRightOutlined /></n-icon>
    </div>
  </div>
  <FileSelect v-model:show="showFileSelectModal" :file-tp-cd="fileTpCd" :multiple="count > 1" @selected="handFileSelected" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { CaretRightOutlined, DeleteOutlined } from '@vicons/antd';
import type { ComponentPropType } from '@yanfan/admin-layout/types';
import ViewVideo from './ViewVideo.vue';
import FileSelect from './Select.vue';

defineOptions({
  name: 'SelectVideoWrap',
});

type IFileSelectOnSelectedParam = Parameters<ComponentPropType<typeof FileSelect, 'onSelected'>>[0];

const props = withDefaults(
  defineProps<{
    value: string | string[];
    fileTpCd: string;
    count?: number; //视频选择数量
    size?: string;
  }>(),
  {
    value: '',
    fileTpCd: '',
    count: 1,
    size: '100px',
  },
);

const emit = defineEmits<{
  (e: 'update:value', value: string | string[]): void;
}>();

const showFileSelectModal = ref<boolean>(false);

function handleDel(index?: number) {
  if (index === undefined && props.count === 1) {
    emit('update:value', '');
  } else if (typeof index === 'number') {
    const list = [...props.value];
    list.splice(index, 1);
    emit('update:value', list);
  }
}

function handFileSelected(data: IFileSelectOnSelectedParam) {
  if (props.count === 1) {
    emit('update:value', data.checkedFileUrlList[0]);
  } else if (props.count > 1) {
    emit('update:value', [...props.value, ...data.checkedFileUrlList]);
  }
}
</script>

<style lang="scss" scoped>
.multiple-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.select-video-box {
  width: 100%;
  height: 100%;
  border: 1px dashed #dddddd;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: flex;
  .del-box {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(223deg, #dc2626 50%, transparent 50%);
    cursor: pointer;
    .icon-box {
      position: absolute;
      top: 2px;
      right: 2px;
    }
  }
  &:hover {
    .del-box {
      display: block;
    }
  }
}
.plus-box {
  width: 100%;
  height: 100%;
  border: 1px dashed #dddddd;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  .icon-box {
    margin: auto;
    color: #cdcdcd;
    transition: transform 0.5s;
  }
  &:hover {
    .icon-box {
      transform: scale(2);
    }
  }
}
</style>
